{% extends "my_movies/shared.html" %}

{% block title %}
{{movietype}} movies
{% endblock %}

{% block extra_head %}
	<script type="text/javascript" src="{{ STATIC_URL }}autosuggest.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}dynamicList.js"></script>
	<link href="{{ STATIC_URL }}autosuggest.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
		function createInitialList() {
			{% for m in movienames %}
			addMovieToList("{{ m|safe }}");{% endfor %}
		}
	</script>
{% endblock %}

{% block body_tag %} onload="createInitialList();"{% endblock %}
{% block content %}
	<h2>Enter a name of a movie below to add it to the {{movietype}} movies:</h2>
	
	<div class="paragraph">
		<form id="movies" action="../" method="post">
			<div id="autosuggest"><ul></ul></div>
			<p>
				<input type="text" id="inputText" name="movie" />
				<script type="text/javascript">
					var movies = new Array({% for m in allmovies %}"{{ m|safe }}"{% if not forloop.last %},{% endif %}{% endfor %});
					new AutoSuggest(document.getElementById("inputText"), movies, function(){addToList(movies); return false;});
				</script>
				<br />
				<input type="image" style="margin-left:80px;" alt="Add" src="{{ STATIC_URL }}images/buttons/add.png" onclick="addToList(movies); return false;" />
				<div class="helpSheet">
					Start writing the name of the movie you want to add in the text box.
					When you see the movie you meant to add, click it and press the 'Add' button.
					That will add the movie to the list below.
					Make sure you press the 'Update' button to finalize the deal.
				</div> 
			</p>
			<div id="addErr"> </div>
			<ul id="chosen">
			</ul>
			<input name="movieType" type="hidden" id="movieType" value="{{movietype}}" />
			<br />
			<input type="image" src ="{{ STATIC_URL }}images/buttons/update.png" value="Update {{movietype}} list" />
			<div class="helpSheet">
				Click the 'Update' button to finalize the list and save it to your profile.
			</div> 
		</form>
	</div>
{% endblock %}
